<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="elements"
      >
        <Button
          icon="el-icon-refresh-right"
          :btn-loading="dcLoading"
          @click="handleStart"
        >清洗计算汇总</Button>
      </FilterForm>
    </Container>
    <Container height="fill">
      <div class="cj-box">
        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="@/assets/image/kaishi.png" alt="">
          </div>

          <div class="textStyle">开始</div>
        </div>
        <div>
          <img src="@/assets/image/jiantou.png" alt="">
        </div>
        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="@/assets/image/cbcj.png" alt="">
          </div>

          <div class="textStyle">清洗计算汇总</div>
        </div>
        <div>
          <img src="@/assets/image/jiantou.png" alt="">
        </div>

        <!-- <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="@/assets/image/srcj.png" alt="">
          </div>

          <div class="textStyle">成本采集</div>
        </div>
        <div>
          <img src="@/assets/image/jiantou.png" alt="">
        </div> -->

        <div class="box">
          <div style="text-align: center; margin-top: 30px">
            <img src="@/assets/image/wancheng.png" alt="">
          </div>

          <div class="textStyle">完成</div>
        </div>
      </div>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  getAssessmentCyclePull
} from '@/api/weight'
import {
  dataCleaning
} from '@/api/dataCleaning'
import {
  getAssessmentCycleById
} from '@/api/targetManagement'
export default {
  data() {
    return {
      dcLoading: false,
      elements: [
        {
          key: 'cycle',
          label: '周期',
          type: 'select',
          itemLabel: 'periodPull',
          itemValue: 'id',
          hideSelectAll: true,
          options: [],
          value: ''
        }
      ],
      imageShow: false
    }
  },
  created() {
    this.getSelect()
  },
  methods: {
    getFileInfo() {
      const id = this.$refs.filterForm.getParms()?.cycle
      getAssessmentCycleById({
        id: id
      }).then((res) => {
        if (res.code === 200) {
          const { isFile } = res.data
          if (isFile === 1) {
            this.imageShow = true
          } else {
            this.imageShow = false
          }
        }
      })
    },
    getSelect() {
      // 周期
      getAssessmentCyclePull().then((res) => {
        if (res.code === 200) {
          this.elements[0].options = res.data
          const { id } = res.data[0]
          this.elements[0].value = id
          localStorage.setItem(
            'cycle',
            JSON.stringify(this.elements[0].options)
          )
          this.getFileInfo()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 清洗计算汇总
    handleStart() {
      this.dcLoading = true
      const params = {
        id: this.$refs.filterForm.getParms()?.cycle,
        period: this.elements[0].options.find(item => item.id === this.$refs.filterForm.getParms()?.cycle)?.periodSuffix
      }
      dataCleaning(params)
        .then((res) => {
          this.dcLoading = false
          if (res.code === 200) {
            this.$message.success(res.data)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.dcLoading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.wraper {
  display: flex;
  height: calc(100% - 30px);
  overflow: hidden;
  .upload-demo {
    .buttons {
      margin: 0px 5px;
      height: 27px;
      margin-top: -1px;
    }
  }
}
.wraper-title {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
}
.cj-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 15px;
  height: 100%;
}
.box {
  width: 220px;
  height: 200px;
  opacity: 1;
  background: #f0f2f5;
  border-radius: 15px;
}
.textStyle {
  text-align: center;
  margin-top: 20px;
  height: 19px;
  opacity: 1;
  font-size: 20px;
  font-weight: 400;
  color: #555555;
}
</style>
